import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { FilterItem } from 'components'
import { Form, Button, Row, Col, DatePicker, Input, Cascader, Switch, Select } from 'antd'
import { converDate, SelectProps } from 'utils'
import { adminCompanyAccoutType } from 'utils/seletLocalData'

const Search = Input.Search
const { RangePicker } = DatePicker
const Option = Select.Option
const FormItem = Form.Item

const ColProps = {
  xs: 24,
  sm: 12,
  style: {
    marginBottom: 16,
  },
}

const TwoColProps = {
  ...ColProps,
  xl: 96,
}
const formItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
}
const Filter = ({
  onCreateAdd,
  onFilterChange,
  filter,
  CompanyAccountInOut,
  companyChargeTypeData,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  },
}) => {
  const handleFields = () => {
    let fields = { ...filter, ...getFieldsValue() }
    const { createTime } = fields
    if (createTime.length > 1) {
      [fields.createTimeStart, fields.createTimeEnd] = [
        createTime[0].format('YYYY-MM-DD 00:00:00'),
        createTime[1].format('YYYY-MM-DD 00:00:00'),
      ]
    } else {
      [fields.createTimeStart, fields.createTimeEnd] = [
        undefined, undefined,
      ]
    }
    fields.createTime = undefined
    return fields
  }

  const handleSubmit = () => {
    onFilterChange(handleFields())
  }

  const handleReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }

  const handleChange = (key, values) => {
    onFilterChange(handleFields())
  }

  // 处理时间
  const dateFormat = 'DD/MM/YYYY'
  const { createTimeStart, createTimeEnd } = filter
  let initialCreateTime = []
  if (createTimeStart && createTimeEnd) {
    initialCreateTime = [moment(converDate(createTimeStart.split(' ')[0]), dateFormat), moment(converDate(createTimeEnd.split(' ')[0]), dateFormat)]
  }
  const companyChargeTypeOptions = companyChargeTypeData.map(d => <Option key={d.id}>{d.typeName}</Option>)
  const CompanyAccountInOutOption = CompanyAccountInOut.map(d => <Option key={d.key}>{d.value}</Option>)
  return (
    <div>
      <Row gutter={24}>
        <Col span={8}>
          <FormItem label="ChargeType" {...formItemLayout}>
            {getFieldDecorator('typeName', {
              initialValue: filter.typeName,
            })(<Select style={{ width: '100%' }}>{companyChargeTypeOptions}</Select>)}
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem label="Type" {...formItemLayout}>
            {getFieldDecorator('type', {
              initialValue: filter.type,
            })(<Select style={{ width: '100%' }}>{CompanyAccountInOutOption}</Select>)}
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem label="CreateTime" {...formItemLayout}>
            {getFieldDecorator('createTime', { initialValue: initialCreateTime })(
              <RangePicker style={{ width: '100%' }} size="large" format={dateFormat} />
            )}
          </FormItem>
        </Col>
      </Row>
      <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', marginBottom: '10px' }}>
        <div >
          <Button type="primary" size="large" className="margin-right" onClick={handleSubmit}>Search</Button>
          <Button size="large" onClick={handleReset}>Reset</Button>
        </div>
        <div >
          <Button size="large" type="ghost" onClick={onCreateAdd}>Create Receipt</Button>
        </div>
      </div>
    </div>
  )
}

Filter.propTypes = {
  onCreateAdd: PropTypes.func,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
  companyChargeTypeData: PropTypes.array,
}

export default Form.create()(Filter)
